<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">{{ '慰问品选项' }}</div>
        </div>
      </template>
      <div class="dialog-body">
        <div class="search-box">
          <div class="form-box">
          </div>
        </div>
        <div class="handle-box">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="showGiftOptionEditDialog()">新增</el-button>
        </div>
        <div class="table-box">
          <el-table v-loading="dataLoading" :data="tableData" :style="{width: '100%'}" height="100%">
            <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop"
              :class-name="item.className" :width="item.width" :min-width="item.minWidth" :sortable="item.sortable"
              :align="item.align || 'center'" :show-overflow-tooltip="item.showOverflowTooltip" :fixed="item.fixed"
              :resizable="false">
              <template slot-scope="{row}">
                <!-- 封面 -->
                <el-image v-if="item.prop == 'giftImageUrl'" class="image" :src="row.giftImageUrl"
                  :preview-src-list="[row.giftImageUrl]" alt="封面" />
                <!-- 操作 -->
                <span v-else-if="item.prop == 'handle'" class="handle">
                  <el-link type="primary" @click="showGiftOptionEditDialog(row)">修改</el-link>
                </span>
                <!-- 默认 -->
                <span v-else>{{ row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getData" />
      </div>
    </el-dialog>
    <!-- 弹窗动态组件 -->
    <component :is="dialogName" :visible.sync="dialogVisible" :params="dialogParams" :width="dialogWidth"
      :height="dialogHeight" @success="handleDialogSuccess" />
  </div>
</template>

<script>
import { getFileNameFromURL } from '@/utils/index.js';
import * as api from '@/api/condolenceManger/index.js';
import * as fileApi from '@/api/file/index.js';
import GiftOptionEditDialog from './GiftOptionEditDialog.vue';

export default {
  name: 'GiftOptionListDialog',
  components: { GiftOptionEditDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '80%',
    },
  },
  data() {
    return {
      dataLoading: false,
      total: 0, // 总条数
      defaultTableColumn: [
        { label: '名称', prop: 'optionName', minWidth: 120 },
        { label: '封面', prop: 'giftImageUrl', minWidth: 95 },
        { label: '描述', prop: 'description', minWidth: 300, showOverflowTooltip: true },
        { label: '操作', prop: 'handle', width: 60, fixed: 'right' },
      ],
      tableColumn: [],
      tableData: [], // 表格数据
      // 查询参数
      form: { pageNum: 1, pageSize: 100 },
      formRules: {},
      dialogName: null, // 弹窗组件名
      dialogVisible: false, // 弹窗显示
      dialogParams: {}, // 弹窗参数
      dialogWidth: '', // 弹窗宽度
      dialogHeight: '', // 弹窗高度
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.form = this.getForm();
          this.tableColumn = this.defaultTableColumn;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    hide() {
      this.resetForm();
      this.$emit('update:visible', false);
    },
    // 获取活动列表
    getData() {
      if (!this.params.collectId) return;
      this.dataLoading = true;
      api.getGiftOptionList({ collectId: this.params.collectId }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.dataLoading = false;
      });
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getData();
    },
    getForm() {
      let form = {
        pageNum: 1,
        pageSize: 100,
        activityName: '',
      };
      return form;
    },
    resetForm() {
      this.form = this.getForm();
    },
    // 修改/新增选项弹窗
    showGiftOptionEditDialog(row) {
      this.dialogName = 'GiftOptionEditDialog';
      this.dialogVisible = true;
      this.dialogParams = { collectId: this.params.collectId, optionId: row?.optionId };
      this.dialogWidth = '500px';
      this.dialogHeight = 'auto';
    },
    handleDialogSuccess(name, params) {
      if (['GiftOptionEditDialog'].includes(name)) {
        this.getData();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dialog.scss';
// @import '@/assets/styles/mixin.scss';

// ::v-deep .el-dialog__body {
//   height: 100% !important;
// }

.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.handle-box {
  flex-shrink: 0;
  margin-bottom: 15px;
}
.table-box {
  flex: 1;
}
</style>
